<template>
  <div class="menuitem">
    <Card style="width:100%; margin-bottom:20px">
      <div style="height:16px">
        <div class="fr">
          <Button size="small" type="primary" @click="showDialog = true">导入</Button>
          <Button size="small" type="primary" style="margin-left: 14px;" @click="showModal=true">
            <Icon type="md-add" />
            增加员工
          </Button>
        </div>
      </div>
    </Card>
    <Card style="width:100%">
      <div style="text-align:center">
        <Table border :columns="columns5" :data="data5">
          <template slot="Address">
            <Button type="text" size="small">查看</Button>
            <Button type="text" size="small">转正</Button>
            <Button type="text" size="small">调岗</Button>
            <Button type="text" size="small">离职</Button>
            <Button type="text" size="small">角色</Button>
            <Button type="text" size="small">删除</Button>
          </template>
        </Table>
      </div>
    </Card>
    <Employee ref="modalaaa" :show-modal="showModal" @handleShowModal="handleShowModal" />
    <!-- <Employee ref="modalaaa" :show-modal="showModal" /> -->
    <EmployeeCopy :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import Employee from './components/employee.vue'
import EmployeeCopy from './components/employeeCopy.vue'
export default {
  components: {
    Employee,
    EmployeeCopy
  },
  data () {
    return {
      // 弹窗
      showModal: false,
      showDialog: false,
      columns5: [
        {
          title: 'Date',
          key: 'date',
          sortable: true
        },
        {
          title: 'Name',
          key: 'name',
          sortable: true
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true
        },
        {
          title: 'Address',
          key: 'address',
          sortable: true,
          fixed: 'right',
          slot: 'Address',
          width: 278
        }
      ],
      data5: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04',
        }
      ]
    }
  },
  methods: {
    handleShowModal (val) {
      console.log(val);
      this.showModal = false
    }
  }

}
</script>

<style scoped lang="scss">
.menuitem {
  padding: 20px;
  min-height: 600px;
  background-color: rgb(240, 242, 245);
  .fr {
    float: right;
  }
  .ivu-btn-text {
    font-size: 12px;
  }
}
</style>
